<template>
<div class="bh-message" :class="[typeClass]">
	<bh-icon class="bh-message__icon" :name='type'></bh-icon>
	<p class="bh-message__content">{{message}}</p>
</div>
</template>

<script>
export default {
	name: 'bh-message',
	props: {
	},
	data() {
		return {
			message: '',
			type: 'info',
			duration: 3000,
			timer: null,
			closed: false,
		}
	},
	methods: {
		handleAfterLeave() {
			this.$destroy(true);
			this.$el.parentNode.removeChild(this.$el);
		},
		close() {
			this.visible = false;
			this.handleAfterLeave();
		},
		clearTimer() {
			clearTimeout(this.timer);
		},
		startTimer() {
			if (this.duration > 0) {
				this.timer = setTimeout(() => {
					if (!this.closed) {
						this.close();
					}
				}, this.duration);
			}
		},
	},
	computed: {
		typeClass() {
			return `bh-message--${ this.type }`;
		},
	},
	mounted() {
		this.startTimer();
		document.addEventListener('keydown', this.keydown);
    },
}
</script>
